<template>
  <div class="layui-layer-shade" :style="shadeStyle"></div>
</template>

<script lang="ts">
import {computed, defineComponent, toRefs, unref} from 'vue'

import { layerProps } from "../layerProps";

const shadeProps = {
  shade: layerProps.shade,
  shadeClose: layerProps.shadeClose
}

export default defineComponent({
  name: 'LayShade',
  props: {
    ...shadeProps
  },
  setup (props) {
    const {
      shade
    } = toRefs(props)
    const shadeStyle = computed(() => {
      const [ opacity, backgroundColor ] = unref(shade)
      return {
        backgroundColor,
        opacity
      }
    })
    return {
      shadeStyle
    }
  }
})
</script>
